(function ($,ec, win, undefined) {

    var chartOption = {
        pie: {
            title: {
                show: false,
                text: "人流热力图"
            },
            tooltip: {
                show: true
            },
            color: ["#8425d2", "#9e3a97", "#2e31be", "#1d9653"],
            legend: {
                show: false
            },
            series: [
                {
                    type: "pie",
                   // hoverAnimation: false,
                    center: ["52%", "50%"],
                    radius: [0, "70%"],
                    slient: true,
                    startAngle: "360",
                    label: {
                        normal: {
                            show: true,
                             formatter: [
                                "{b|{b}：}{c|{c}}{people|人} "
                            ].join('\n'),
                            backgroundColor: "rgba(83,79,115,0.5)",
                            borderWidth: 1,
                            borderRadius: 4,
                            padding: [10, 15],
                            rich: {
                                b: {
                                    color: "#fff",
                                    fontSize: getSize("labelTitle")
                                },
                                c: {
                                    color: "#fff",
                                    fontSize: getSize("labelTitle")
                                },
                                people: {
                                    color: "#fff",
                                    fontSize: getSize("labelTitle")
                                }
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:[
                        {value:2333, name:"大厅"},
                        {value:100, name:"三楼"},
                        {value:200, name:"四楼"},
                        {value:400, name:"六楼"}
                    ]
                }
            ]
        },
        line: {
            title: {
                show: false
            },
            tooltip: {
                show: true,
                trigger: "axis"
            },
            legend: {
                show: true,
                left: "7%",
                top: "3%",
                itemWidth: getSize("legendItemWidth"),
                itemHeight: getSize("legendItemHeight"),
                textStyle: {
                    fontSize: getSize("legend")
                },
                data:[
                    {
                        name: "大厅",
                        textStyle: {
                            color: "#16fb97"
                        }
                    }, 
                    {
                        name: "三楼",
                        textStyle: {
                            color: "#6d18f9"
                        }
                    },
                    {
                        name: "四楼",
                        textStyle: {
                            color: "#aac9f5"
                        }
                    },
                    {
                        name: "六楼",
                        textStyle: {
                            color: "#de4a74"
                        }
                    }
                ]

            },
            color: ["#16fb97", "#6d18f9", "#aac9f5", "#de4a74"],
            grid: {
                left: getSize("grid_l"),
                right: getSize("grid_r"),
                top: getSize("grid_t"),
                bottom: getSize("grid_b")
            },
            xAxis : [
                {
                    type : "category",
                    boundaryGap: false,
                    axisLabel: {
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("xAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type : "value",
                    axisLabel: {
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("xAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#1a3aad"
                        }
                    }
                }
            ],
            series : []           
        }
    };

    var pieChart = ec.init(document.getElementById("statisticsVenuechart"));
    pieChart.clear();
    pieChart.setOption($.extend(true, {}, chartOption.pie));

    var lineChart = ec.init(document.getElementById("ywdStatisticsChart"));
    lineChart.clear();
    var types = ["day", "week", "year"];
    var interval = null;
    var currentType = types[0];

    setLine(currentType);
    setMyInterval();

    // 添加click事件，手动触发年周日切换
    $("[data-chart]").on("click", function () {
        var $this = $(this);
        if ($this.is(".active")) return;

        currentType = $this.attr("data-chart");
        changeBtnState($this);
        setLine(currentType);
        setMyInterval();
    });


    // 更换按钮状态
    function changeBtnState(btn) {
    	btn.siblings(".active").removeClass("active");
        btn.addClass("active");	 		
    }


    // 添加定时器，轮播年周日图表
    function setMyInterval() {
        if (interval != null) {
            clearInterval(interval);
            interval = null;
        }
        interval = setInterval(function () {
            var index = $.inArray(currentType, types);
            if (index < types.length - 1) {
                currentType = types[++index]
            } else {
                currentType = types[0];
            }
            changeBtnState($("[data-chart='"+ currentType +"']"));
            setLine(currentType);
        }, 10000);
    }

    // 设置年周日图表
    function setLine(type, option) {
        lineChart.clear();
        switch (type) {
            case "day":
                option = $.extend(true, {}, chartOption.line, option || {
                    xAxis: [
                        {
                            data : ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
                        }
                    ],
                    series: [
                        {
                            name: "大厅",
                            type: "line",
                            smooth: true,
                            data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
                            stack: "总人数"
                        },
                        {
                            name: "三楼",
                            type: "line",
                            smooth: true,
                            data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "四楼",
                            type: "line",
                            smooth: true,
                            data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "六楼",
                            type: "line",
                            smooth: true,
                            data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
                            stack: "总人数"
                        }
                    ]
                });
                break;
            case "week":
                option = $.extend(true, {}, chartOption.line, option || {
                        xAxis: [
                            {
                                data : ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
                            }
                        ],
                        series: [
                        {
                            name: "大厅",
                            type: "line",
                            smooth: true,
                            data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
                            stack: "总人数"
                        },
                        {
                            name: "三楼",
                            type: "line",
                            smooth: true,
                            data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "四楼",
                            type: "line",
                            smooth: true,
                            data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "六楼",
                            type: "line",
                            smooth: true,
                            data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
                            stack: "总人数"
                        }
                    ]
                    });
                break;
            case "year":
                option = $.extend(true, {}, chartOption.line, option || {
                        xAxis: [
                            {
                                data : ["2011", "2012", "2013", "2014", "2015", "2016", "2017"]
                            }
                        ],
                        series: [
                        {
                            name: "大厅",
                            type: "line",
                            smooth: true,
                            data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
                            stack: "总人数"
                        },
                        {
                            name: "三楼",
                            type: "line",
                            smooth: true,
                            data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "四楼",
                            type: "line",
                            smooth: true,
                            data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
                            stack: "总人数"
                        },
                        {
                            name: "六楼",
                            type: "line",
                            smooth: true,
                            data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
                            stack: "总人数"
                        }
                    ]
                    });
                break;
        }

        lineChart.setOption(option);
    }

    var timeout = null;
    win.onresize = function () {
        if (!timeout) {
            clearTimeout(timeout);
            timeout = null;
        };
        timeout = setTimeout(setChartSize, 300);
    };
    function setChartSize() {
        lineChart.resize();
        var o = {
            xAxis: [{
                axisLabel: {
                    fontSize: getSize("xAxisLabel")
                }
            }],
            yAxis: [{
                axisLabel: {
                    fontSize: getSize("yAxisLabel")
                }
            }],
            grid: {
                left: getSize("grid_l"),
                right: getSize("grid_r"),
                top: getSize("grid_t"),
                bottom: getSize("grid_b")
            },
            legend: {
                itemWidth: getSize("legendItemWidth"),
                itemHeight: getSize("legendItemHeight"),
                textStyle: {
                    fontSize: getSize("legend")
                }
            }
        };
        $.extend(true, chartOption.line, o);
        lineChart.setOption(o);

        var o1 = {
            series: [
                {
                    label: {
                        normal: {
                            rich: {
                                b: {
                                    fontSize: getSize("labelTitle")
                                },
                                c: {
                                    fontSize: getSize("labelTitle")
                                },
                                people: {
                                    fontSize: getSize("labelTitle")
                                }
                            }
                        }
                    }
                }
            ]
        }
        $.extend(true, chartOption.pie, o1);

        pieChart.resize();
        pieChart.setOption(o1);
    }

    function getSize(type) {
        var size = parseFloat(document.documentElement.style.fontSize);
        if (!size) return;
        var per = 0;
        switch (type) {
            case "legend":
            case "xAxisLabel":
            case "yAxisLabel":
            case "labelTitle":
                per = (14.33/0.75)/91;
                break;  
            case "grid_t":
                per = 60 / 91;    
                break;
            case "grid_b":
                per = 56 / 91;
                break;
            case "grid_l":
                per =  804 * 0.15 / 91; 
                break;
            case "grid_r":
                per = 804 * 0.07 / 91;
                break;
            case "legendItemWidth":
                per = 32 / 91;
                break;
            case "legendItemHeight": 
                per = 20 / 91;
                break;
        }
        size = size * per;
        return size;    
    }
    
})(jQuery, echarts, window);
